import React from 'react';
import styles from './psMark.less';
import { DatePicker, Button, Input, Table, Form, Select } from 'antd';
import request from '@/http';

const { RangePicker } = DatePicker;
const { Option } = Select;

export default () => {
  function onChange(value: any, dateString: any) {
    console.log('Selected Time: ', value);
    console.log('Formatted Selected Time: ', dateString);
  }

  function onOk(value: any) {
    console.log('onOk: ', value);
  }

  const [formObject] = Form.useForm();

  const [searchValue, setSearchValue] = React.useState('');
  const [dataSource, setDataSource] = React.useState<any[]>([]);
  const [pagination, setPagination] = React.useState({
    current: 1,
    total: 10,
    pageSize: 10,
    showSizeChanger: true,
    pageSizeOptions: ['10', '50', '200', '500'],
    showQuickJumper: true,
  });
  const loadDataSource = async (
    userParams: any,
    pageValue: any,
    pageSize: any,
  ) => {
    const result: any = await request.get(
      '/admin/score/queryAllStudentScoreInfo',
      {
        params: {
          ...userParams,
          current: pageValue - 1,
          size: pageSize,
        },
      },
    );
    console.log('---------------------------------');
    console.log(result);
    if (result && result.code === 200) {
      const data: any = result.data.map((user: any) => ({
        key: `user_${user.id}`,
        id: user.id,
        teacherName: user.teacherName,
        jobNumber: user.jobNumber,
        identity: user.identity,
        gender: user.gender,
        phone: user.phone,
        positionId: user.positionId,
        status: user.status,
      }));
      //搜索框 小组名称
      const chooseMajor: any = await request.get('/queryAllMajor');
      if (result.code === 200) {
        const cMajor = chooseMajor.map((user: any) => ({
          key: `user_${user.majorId}`,
          id: user.majorId,
          majorId: user.majorId,
          majorName: user.majorName,
        }));
        localStorage.setItem('major', JSON.stringify(cMajor));
      }

      const newPageObject = {
        ...pagination,
        current: pageValue,
        size: pageSize,
        total: result.records, //总条数 分页               *******************
      };
      console.log(result.total);
      setPagination(newPageObject);
      setDataSource(data);
      // console.log(data)
    }
  };

  //搜索
  const searchOnClick = async () => {
    console.log('个人评分的搜索框表单：', formObject.getFieldsValue());
    const data = await formObject.validateFields();
    var dataStr = '';
    var ds = {
      ...data,
    };
    console.log(data);
    for (var n in ds) {
      if (dataStr != '') dataStr += '&';
      dataStr += encodeURIComponent(n) + '=' + encodeURIComponent(ds[n]);
    }
    console.log('个人评分的搜索框表单：', dataStr);

    await loadDataSource(data, 1, pagination.pageSize);
  };

  //生命周期函数
  React.useEffect(() => {
    loadDataSource(null, 1, pagination.pageSize).finally();
  }, []);

  //换页
  const pageOnChange = async (page: any) => {
    await loadDataSource(
      formObject.getFieldsValue(),
      page.current,
      page.pageSize,
    );
  };

  return (
    <div className="pageMain">
      <div className="pageContent">
        <div className="search" style={{ width: '1200px', height: '150px' }}>
          <div className={styles.searchForm}>
            <Form layout="inline">
              <Form.Item label="项目名称" name="courseName" initialValue="">
                <Select className="personScoreSelect">
                  <Option value="">请选择...</Option>
                  <Option value="1">项目1</Option>
                  <Option value="2">项目2</Option>
                </Select>
              </Form.Item>

              <Form.Item label="小组名称" name="groupName" initialValue="">
                <Select className="personScoreSelect">
                  <Option value="">请选择...</Option>
                  <Option value="1">小组1</Option>
                  <Option value="2">小组2</Option>
                </Select>
              </Form.Item>

              <Form.Item>
                <Button type="primary" onClick={searchOnClick}>
                  查询
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>

        <div className={styles.mainTable}>
          <Table
            columns={[
              {
                title: '院系',
                dataIndex: 'collegesName',
                key: 'collegesName',
                width: 75,
                align: 'center',
              },
              {
                title: '专业',
                dataIndex: 'major',
                key: 'major',
                width: 75,
                align: 'center',
              },
              {
                title: '项目名称',
                dataIndex: 'courseName',
                key: 'courseName',
                width: 100,
                align: 'center',
              },
              {
                title: '责任老师',
                dataIndex: 'teacherName',
                key: 'teacherName',
                width: 75,
                align: 'center',
              },
              {
                title: '小组',
                dataIndex: 'groupName',
                key: 'groupName',
                width: 75,
                align: 'center',
              },
              {
                title: '姓名',
                dataIndex: 'stuName',
                key: 'stuName',
                width: 75,
                align: 'center',
              },
              {
                title: '学号',
                dataIndex: 'stuNumber',
                key: 'stuNumber',
                width: 75,
                align: 'center',
              },
              {
                title: '性别',
                dataIndex: 'gender',
                key: 'gender',
                width: 50,
                align: 'center',
              },
              {
                title: '项目角色',
                dataIndex: 'role',
                key: 'role',
                width: 75,
                align: 'center',
              },
              {
                title: '综合评分',
                dataIndex: 'score',
                key: 'score',
                width: 75,
                align: 'center',
              },

              {
                title: '作业评分',
                key: 'workScore',
                align: 'center',
                width: 75,
                render: (row: any) => (
                  <>
                    <Button type="link">查看详情</Button>
                  </>
                ),
              },
            ]}
            dataSource={dataSource}
            pagination={pagination}
            tableLayout="fixed"
            bordered
          />
        </div>
      </div>
    </div>
  );
};
